<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">供应商编辑</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100">
          <el-button
            class="btn-success width100"
            type="primary"
            @click="submitForm(1)"
          >保存</el-button>
        </el-col>
        <el-col class="mr20 width100">
          <el-button
            class="btn-success width100"
            type="primary"
            @click="submitForm(2)"
          >提交</el-button>
        </el-col>
        <el-col :span="10" class="status-container">
          <div class="status-item">
            <span class="active">待审核</span>
            <span>已审核</span>
            <span>反审核</span>
            <span>拒绝</span>
          </div>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" label-width="140px" class="mt30">
        <ul class="tabs">
          <li @click="current = 0" :class="{ active: current === 0 }">基础资料</li>
          <li @click="current = 1" :class="{ active: current === 1 }">证件资料</li>
          <li @click="current = 2" :class="{ active: current === 2 }">发票地址</li>
        </ul>
        <div v-show="current === 0">
          <el-row>
            <el-col :span="8">
              <el-form-item label="供应商编码:" prop="supCode" class="icon-star">
                <el-input v-model="form.supCode" placeholder="请输入供应商名称" :disabled="form.checkStatus == '1' ? true : false" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商名称:" prop="name" class="icon-star">
                <el-input v-model="form.name" placeholder="请输入供应商名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商简称:" prop="shortName">
                <el-input v-model="form.shortName" placeholder="请输入供应商简称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="外文名称:" prop="englishName">
                <el-input v-model="form.englishName" placeholder="请输入外文名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商助记码:" prop="mnemonicCode">
                <el-input v-model="form.mnemonicCode" placeholder="请输入供应商助记码" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法人:" prop="legalPerson">
                <el-input v-model="form.legalPerson" placeholder="请输入法人" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商分类:" prop="sortId">
                <treeselect v-model="form.sortId" :options="areaListOptions" :normalizer="areaNormal" placeholder="选择供应商分类" noOptionsText="暂无数据" @select="changeSelect" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商类型:" prop="supType">
                <el-select v-model="form.supType" placeholder="请选择" @change="val => onSupType(val)" style="width:100%;">
                  <el-option v-for="item of supTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="isType">
              <el-form-item label="生产商:" prop="typeLink">
                <el-input v-model="form.typeLink" placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="联系人:" prop="contact">
                <el-input v-model="form.contact" placeholder="请输入联系人" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话:" prop="contactTel">
                <el-input v-model="form.contactTel" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="营业执照编号:" prop="businessLicense">
                <el-input v-model="form.businessLicense" placeholder="请输入营业执照编号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮政编码:" prop="zipCode">
                <el-input v-model="form.zipCode" placeholder="请输入邮政编码" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电子邮件:" prop="email">
                <el-input v-model="form.email" placeholder="请输入电子邮件" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="网址:" prop="url">
                <el-input v-model="form.url" placeholder="请输入网址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="办公地址:">
                <el-select v-model="form.province" placeholder="请选择" @change="val => onProvince(val, 1)" class="mr10 width180">
                  <el-option v-for="(item,index) of provinceAddress" :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
                <el-select v-model="form.city" placeholder="请选择" @change="val => onCity(val, 1)" class="mr10 width180">
                  <el-option v-for="(item,index) of cityAddress" :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
                <el-select v-model="form.zone" placeholder="请选择" class="mr10 width180" @change="val => onZone(val, 1)">
                  <el-option v-for="(item,index) of zoneAddress" :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
                <el-input v-model="form.address" placeholder="详细地址" style="width:30%;" @input="val => onAddress(val, 1)" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="备注:" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入备注" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-show="current === 1">
          <!-- 营业执照 -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">营业执照</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 11)}"
                :show-file-list="false"
              >
                <div v-if="typeList11">
                  <img v-if="typeList11.fileType == '.jpg' || typeList11.fileType == '.png' || typeList11.fileType == '.gif' || typeList11.fileType == '.bmp' || typeList11.fileType == 'jpeg'" :src="typeList11.fileUrl" class="avatar">
                  <span v-else>{{ typeList11.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList11.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 11)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList11.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 11)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 医疗器械法规要求（安全性证明文件） -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">医疗器械法规要求<br />(安全性证明文件)</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 1)}"
                :show-file-list="false"
              >
                <div v-if="typeList1">
                  <img v-if="typeList1.fileType == '.jpg' || typeList1.fileType == '.png' || typeList1.fileType == '.gif' || typeList1.fileType == '.bmp' || typeList1.fileType == 'jpeg'" :src="typeList1.fileUrl" class="avatar">
                  <span v-else>{{ typeList1.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList1.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 1)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList1.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 1)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 医疗器械法规要求（生产环境证明文件） -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">医疗器械法规要求<br />(生产环境证明文件)</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 2)}"
                :show-file-list="false"
              >
                <div v-if="typeList2">
                  <img v-if="typeList2.fileType == '.jpg' || typeList2.fileType == '.png' || typeList2.fileType == '.gif' || typeList2.fileType == '.bmp' || typeList2.fileType == 'jpeg'" :src="typeList2.fileUrl" class="avatar">
                  <span v-else>{{ typeList2.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList2.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 2)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList2.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 2)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 进口原料检疫报告 -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">进口原料检疫报告</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 3)}"
                :show-file-list="false"
              >
                <div v-if="typeList3">
                  <img v-if="typeList3.fileType == '.jpg' || typeList3.fileType == '.png' || typeList3.fileType == '.gif' || typeList3.fileType == '.bmp' || typeList3.fileType == 'jpeg'" :src="typeList3.fileUrl" class="avatar">
                  <span v-else>{{ typeList3.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList3.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 3)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList3.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 3)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 产品质量标准 -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">产品质量标准</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 4)}"
                :show-file-list="false"
              >
                <div v-if="typeList4">
                  <img v-if="typeList4.fileType == '.jpg' || typeList4.fileType == '.png' || typeList4.fileType == '.gif' || typeList4.fileType == '.bmp' || typeList4.fileType == 'jpeg'" :src="typeList4.fileUrl" class="avatar">
                  <span v-else>{{ typeList4.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList4.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 4)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList4.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 4)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 执照电子档 -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">执照电子档</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 5)}"
                :show-file-list="false"
              >
                <div v-if="typeList5">
                  <img v-if="typeList5.fileType == '.jpg' || typeList5.fileType == '.png' || typeList5.fileType == '.gif' || typeList5.fileType == '.bmp' || typeList5.fileType == 'jpeg'" :src="typeList5.fileUrl" class="avatar">
                  <span v-else>{{ typeList5.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList5.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 5)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList5.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 5)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 供方调查表 -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">供方调查表</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 6)}"
                :show-file-list="false"
              >
                <div v-if="typeList6">
                  <img v-if="typeList6.fileType == '.jpg' || typeList6.fileType == '.png' || typeList6.fileType == '.gif' || typeList6.fileType == '.bmp' || typeList6.fileType == 'jpeg'" :src="typeList6.fileUrl" class="avatar">
                  <span v-else>{{ typeList6.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList6.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 6)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList6.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 6)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 生产许可证 -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">生产许可证</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 7)}"
                :show-file-list="false"
              >
                <div v-if="typeList7">
                  <img v-if="typeList7.fileType == '.jpg' || typeList7.fileType == '.png' || typeList7.fileType == '.gif' || typeList7.fileType == '.bmp' || typeList7.fileType == 'jpeg'" :src="typeList7.fileUrl" class="avatar">
                  <span v-else>{{ typeList7.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList7.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 7)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList7.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 7)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 产品授权书 -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">产品授权书</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 8)}"
                :show-file-list="false"
              >
                <div v-if="typeList8">
                  <img v-if="typeList8.fileType == '.jpg' || typeList8.fileType == '.png' || typeList8.fileType == '.gif' || typeList8.fileType == '.bmp' || typeList8.fileType == 'jpeg'" :src="typeList8.fileUrl" class="avatar">
                  <span v-else>{{ typeList8.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList8.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 8)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList8.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 8)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 质量认证体系证书 -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">质量认证体系证书</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 9)}"
                :show-file-list="false"
              >
                <div v-if="typeList9">
                  <img v-if="typeList9.fileType == '.jpg' || typeList9.fileType == '.png' || typeList9.fileType == '.gif' || typeList9.fileType == '.bmp' || typeList9.fileType == 'jpeg'" :src="typeList9.fileUrl" class="avatar">
                  <span v-else>{{ typeList9.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList9.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 9)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList9.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 9)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 产品的工艺流程图 -->
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">产品的工艺流程图</div>
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="(file) => {onUploadType(file, 10)}"
                :show-file-list="false"
              >
                <div v-if="typeList10">
                  <img v-if="typeList10.fileType == '.jpg' || typeList10.fileType == '.png' || typeList10.fileType == '.gif' || typeList10.fileType == '.bmp' || typeList10.fileType == 'jpeg'" :src="typeList10.fileUrl" class="avatar">
                  <span v-else>{{ typeList10.fileName }}</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期:">
                <el-date-picker v-model="typeList10.startTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" @change="(val) => {onStartTime(val, 10)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期:">
                <el-date-picker v-model="typeList10.endTime" suffix-icon="el-icon-date" type="date" value-format="yyyy-MM-dd" placeholder="请选择完成日期" @change="(val) => {onEndTime(val, 10)}">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-show="current === 2">
          <el-row>
            <el-col :span="8">
              <el-form-item label="公司名称（中文）:" prop="shareInvoice.companyName">
                <el-input v-model="form.shareInvoice.companyName" placeholder="请输入公司名称（中文）" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="公司名称（英文）:" prop="shareInvoice.companyEnName">
                <el-input v-model="form.shareInvoice.companyEnName" placeholder="请输入公司名称（英文）" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="公司注册地址:">
                <el-select v-model="form.shareInvoice.addressCountry" placeholder="请选择" class="mr10 width100">
                  <el-option label="中国" value="中国" ></el-option>
                </el-select>
                <el-select v-model="form.shareInvoice.addressCountry" placeholder="请选择" class="mr10 width100">
                  <el-option label="中国" value="中国" ></el-option>
                </el-select>
                <el-select v-model="form.shareInvoice.addressProvince" placeholder="请选择" @change="val => onProvince(val, 2)" class="mr10 width180">
                  <el-option v-for="(item,index) of provinceArr" :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
                <el-select v-model="form.shareInvoice.addressCity" placeholder="请选择" @change="val => onCity(val, 2)" class="mr10 width180">
                  <el-option v-for="(item,index) of cityArr" :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
                <el-select v-model="form.shareInvoice.addressRegion" placeholder="请选择" @change="val => onZone(val, 2)" class="mr10 width180">
                  <el-option v-for="(item,index) of regionArr" :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
                <el-input v-model="form.shareInvoice.addressDetailed" placeholder="详细地址" style="width:30%;" @input="val => onAddress(val, 2)" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="纳税人类型:" prop="shareInvoice.taxpayerType">
                <el-radio-group v-model="form.shareInvoice.taxpayerType">
                  <el-radio label="0">增值税一般纳税人</el-radio>
                  <el-radio label="1">增值税小规模纳税人</el-radio>
                  <el-radio label="2">营业纳税人</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="纳税类型比例:" prop="shareInvoice.taxpayerScale">
                <el-radio-group v-model="form.shareInvoice.taxpayerScale">
                  <el-radio label="0">13%</el-radio>
                  <el-radio label="1">9%</el-radio>
                  <el-radio label="2">6%</el-radio>
                  <el-radio label="3">3%</el-radio>
                  <el-radio label="4">1%</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { detailSupplier, editSupplier } from "@/api/system/basedata/supplier/supplier";
import { uploadImg } from "@/api/system/upload/upload";
import { listToAddSupplierlist, checkSupplierlist } from "@/api/system/basedata/supplierlist/supplierlist";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { province } from '@/commonJs/linkage.js';
export default {
  name: "supplierEdit",
  components: { Treeselect },
  data(){
    return {
      current: 0,
      form: {
        supCode: '',
        name: '',
        shortName: '',
        englishName: '',
        mnemonicCode: '',
        legalPerson: '',
        sortId: undefined,
        supType: '',
        typeLink: '',
        contact: '',
        contactTel: '',
        email: '',
        url: '',
        province: '',
        city: '',
        zone: '',
        address: '',
        zipCode: '',
        businessLicense: '',
        startTime: '',
        endTime: '',
        remark: '',
        fileList: [],
        shareInvoice: {
          companyName: '',
          companyEnName: '',
          addressCountry: '',
          addressProvince: '',
          addressCity: '',
          addressRegion: '',
          addressDetailed: '',
          taxpayerType: '',
          taxpayerScale: '',
        }
      },
      supTypeList: [
        {
          value: '0',
          label: '代理商'
        },
        {
          value: '1',
          label: '生产商'
        },
        {
          value: '2',
          label: '承运商'
        }
      ],
      areaListOptions: [],
      typeList1: {},
      typeList2: {},
      typeList3: {},
      typeList4: {},
      typeList5: {},
      typeList6: {},
      typeList7: {},
      typeList8: {},
      typeList9: {},
      typeList10: {},
      typeList11: {},
      provinceAddress: [],
      cityAddress: [],
      zoneAddress: [],
      provinceArr: [],
      cityArr: [],
      regionArr: [],
      id: '',
      isType: false
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
    this.getSupplierlist()
    this.provinceAddress = province
    this.provinceArr = province
  },
  methods: {
    // 获取详情信息
    getDetailData() {
      detailSupplier(this.id).then(res => {
        this.form = res.data
        if(res.data.supType == '0'){
          this.isType = true
        }
        this.form.fileList = res.data.fileList == null ? [] : res.data.fileList
        this.form.shareInvoice = res.data.shareInvoice == null ? '' : res.data.shareInvoice
        this.getDetailUpload()
        this.getSupplierlist()
      })
    },
    // 转换上传图片
    getDetailUpload(){
      let arr1 = this.form.fileList.find((item) => {
          return item.type == 'SUP002'
      })
      let arr2 = this.form.fileList.find((item) => {
          return item.type == 'SUP003'
      })
      let arr3 = this.form.fileList.find((item) => {
          return item.type == 'SUP004'
      })
      let arr4 = this.form.fileList.find((item) => {
          return item.type == 'SUP005'
      })
      let arr5 = this.form.fileList.find((item) => {
          return item.type == 'SUP006'
      })
      let arr6 = this.form.fileList.find((item) => {
          return item.type == 'SUP007'
      })
      let arr7 = this.form.fileList.find((item) => {
          return item.type == 'SUP008'
      })
      let arr8 = this.form.fileList.find((item) => {
          return item.type == 'SUP009'
      })
      let arr9 = this.form.fileList.find((item) => {
          return item.type == 'SUP010'
      })
      let arr10 = this.form.fileList.find((item) => {
          return item.type == 'SUP011'
      })
      let arr11 = this.form.fileList.find((item) => {
          return item.type == 'SUP001'
      })
      this.typeList1 = arr1 == undefined ? '' : arr1
      this.typeList2 = arr2 == undefined ? '' : arr2
      this.typeList3 = arr3 == undefined ? '' : arr3
      this.typeList4 = arr4 == undefined ? '' : arr4
      this.typeList5 = arr5 == undefined ? '' : arr5
      this.typeList6 = arr6 == undefined ? '' : arr6
      this.typeList7 = arr7 == undefined ? '' : arr7
      this.typeList8 = arr8 == undefined ? '' : arr8
      this.typeList9 = arr9 == undefined ? '' : arr9
      this.typeList10 = arr10 == undefined ? '' : arr10
      this.typeList11 = arr11 == undefined ? '' : arr11
    },
    // 获取供应商分类
    getSupplierlist(){
      listToAddSupplierlist().then(res => {
        this.areaListOptions = this.handleTree(res.rows, "id")
      })
    },
    // 检测是否含有子集
    changeSelect(e){
      // console.log(e)
      checkSupplierlist(e.id).then(res => {
        // console.log(res)
        if(res.code == 103){
          this.form.sortId = undefined
          this.$modal.msgError(res.msg)
        }
      })
    },
    // 供应商类型
    onSupType(e){
      if(e == '0'){
        this.isType = true
      }else{
        this.isType = false
      }
    },
    // 转换供应商数据结构 
    areaNormal(e) {
      if (e.children && !e.children.length) {
        delete e.children
      }
      return {
        id: e.id,
        label: e.sortName,
        children: e.children
      }
    },
    // 省份
    onProvince(val, e){
      if(e == 1){
        this.cityAddress = []
        this.zoneAddress = []
        this.form.city = ''
        this.form.zone = ''
        this.form.address = ''
        for (let item of this.provinceAddress) {
          if (val == item.name) {
            this.cityAddress = item.children
          }
        }
      }else{
        this.cityArr = []
        this.regionArr = []
        this.form.shareInvoice.addressCity = ''
        this.form.shareInvoice.addressRegion = ''
        this.form.shareInvoice.addressDetailed = ''
        for (let item of this.provinceArr) {
          if (val == item.name) {
            // console.log(item)
            this.cityArr = item.children
          }
        }
      }
    },
    // 城市
    onCity (val, e) {
      if(e == 1){
        this.zoneAddress = []
        this.form.zone = ''
        this.form.address = ''
        for (let item of this.cityAddress) {
          if (val == item.name) {
            this.zoneAddress = item.children
          }
        }
      }else{
        this.regionArr = []
        this.form.shareInvoice.addressRegion = ''
        this.form.shareInvoice.addressDetailed = ''
        for (let item of this.cityArr) {
          if (val == item.name) {
            this.regionArr = item.children
          }
        }
      }
    },
    // 区/县
    onZone(val, e){
      if(e == 1){
        this.form.address = ''
      }else{
        this.form.shareInvoice.addressDetailed = ''
      }
    },
    // 详细地址
    onAddress(e, type){
      let text = e
      if(type == 1){
        let a = e.indexOf(this.form.province) != -1
        let b = e.indexOf(this.form.city) != -1
        let c = e.indexOf(this.form.zone) != -1
        if(a == true){
          text = text.replace(this.form.province, '')
        }
        if(b == true){
          text = text.replace(this.form.city, '')
        }
        if(c == true){
          text = text.replace(this.form.zone, '')
        }
        this.form.address = text
      }else{
        let a = e.indexOf(this.form.shareInvoice.addressProvince) != -1
        let b = e.indexOf(this.form.shareInvoice.addressCity) != -1
        let c = e.indexOf(this.form.shareInvoice.addressRegion) != -1
        if(a == true){
          text = text.replace(this.form.shareInvoice.addressProvince, '')
        }
        if(b == true){
          text = text.replace(this.form.shareInvoice.addressCity, '')
        }
        if(c == true){
          text = text.replace(this.form.shareInvoice.addressRegion, '')
        }
        this.form.shareInvoice.addressDetailed = text
      }
    },
    // 上传文件
    onUploadType(e, item){
      this.$modal.loading("正在上传")
      // console.log(e, item)
      let formData = new FormData()
      let file = e.raw
      formData.append('file', file)
      uploadImg(formData).then(res => {
        this.$modal.closeLoading()
        this.$modal.msgSuccess("上传成功")
        let obj = res.data
        if(this.id !== ''){
          obj.businessId = this.id
        }
        if(item == 1){
          this.typeList1 = res.data
          obj.type = 'SUP002' // 医疗器械法规要求(安全性证明文件)
        }else if(item == 2){
          this.typeList2 = res.data
          obj.type = 'SUP003' // 医疗器械法规要求(生产环境证明文件)
        }else if(item == 3){
          this.typeList3 = res.data
          obj.type = 'SUP004' // 进口原料检疫报告
        }else if(item == 4){
          this.typeList4 = res.data
          obj.type = 'SUP005' // 产品质量标准
        }else if(item == 5){
          this.typeList5 = res.data
          obj.type = 'SUP006' // 执照电子档
        }else if(item == 6){
          this.typeList6 = res.data
          obj.type = 'SUP007' // 供方调查表
        }else if(item == 7){
          this.typeList7 = res.data
          obj.type = 'SUP008' // 生产许可证
        }else if(item == 8){
          this.typeList8 = res.data
          obj.type = 'SUP009' // 产品授权书
        }else if(item == 9){
          this.typeList9 = res.data
          obj.type = 'SUP010' // 质量认证体系证书
        }else if(item == 10){
          this.typeList10 = res.data
          obj.type = 'SUP011' // 产品的工艺流程图
        }else{
          this.typeList11 = res.data
          obj.type = 'SUP001' // 营业执照
        }
        if(this.form.fileList.length > 0){
          const idx = this.form.fileList.findIndex(i => i.type == obj.type)
          idx < 0 ? this.form.fileList.push(obj) : this.form.fileList.splice(idx, 1, obj)
        }else{
          this.form.fileList.push(obj)
        }
      })
    },
    // 开始时间
    onStartTime(e, item){
      // console.log(e, item)
      if(item == 1){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP002'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传医疗器械法规要求(安全性证明文件)！')
          this.typeList1 = {}
        }
      }else if(item == 2){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP003'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传医疗器械法规要求(生产环境证明文件)！')
          this.typeList2 = {}
        }
      }else if(item == 3){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP004'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传进口原料检疫报告！')
          this.typeList3 = {}
        }
      }else if(item == 4){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP005'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传产品质量标准！')
          this.typeList4 = {}
        }
      }else if(item == 5){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP006'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传执照电子档！')
          this.typeList5 = {}
        }
      }else if(item == 6){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP007'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传供方调查表！')
          this.typeList6 = {}
        }
      }else if(item == 7){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP008'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传生产许可证！')
          this.typeList7 = {}
        }
      }else if(item == 8){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP009'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传产品授权书！')
          this.typeList8 = {}
        }
      }else if(item == 9){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP010'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传质量认证体系证书！')
          this.typeList9 = {}
        }
      }else if(item == 10){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP011'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传产品的工艺流程图！')
          this.typeList10 = {}
        }
      }else{
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP001'){
              i.startTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传营业执照！')
          this.typeList11 = {}
        }
      }
    },
    // 结束时间
    onEndTime(e, item){
      if(item == 1){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP002'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传医疗器械法规要求(安全性证明文件)！')
          this.typeList1 = {}
        }
      }else if(item == 2){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP003'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传医疗器械法规要求(生产环境证明文件)！')
          this.typeList2 = {}
        }
      }else if(item == 3){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP004'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传进口原料检疫报告！')
          this.typeList3 = {}
        }
      }else if(item == 4){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP005'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传产品质量标准！')
          this.typeList4 = {}
        }
      }else if(item == 5){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP006'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传执照电子档！')
          this.typeList5 = {}
        }
      }else if(item == 6){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP007'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传供方调查表！')
          this.typeList6 = {}
        }
      }else if(item == 7){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP008'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传生产许可证！')
          this.typeList7 = {}
        }
      }else if(item == 8){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP009'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传产品授权书！')
          this.typeList8 = {}
        }
      }else if(item == 9){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP010'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传质量认证体系证书！')
          this.typeList9 = {}
        }
      }else if(item == 10){
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP011'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传产品的工艺流程图！')
          this.typeList10 = {}
        }
      }else{
        if(this.form.fileList.length > 0){
          this.form.fileList.forEach(i => {
            if(i.type == 'SUP001'){
              i.endTime = e
            }
          })
        }else{
          this.$modal.msgError('请上传营业执照！')
          this.typeList11 = {}
        }
      }
    },
    // 提交数据
    submitForm(e) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(e == 1){
            this.$modal.loading("正在保存")
            editSupplier(this.form).then(res=> {
              // console.log(res)
              if(res.code == 200){
                this.$modal.msgSuccess("保存成功")
                this.$modal.closeLoading()
              }
            })
          }else{
            // 审核状态 approveStatus（0待审核 1已审核 2反审核 3拒绝 4 草稿
            // 状态 status（0草稿 1正常 2禁用）
            let arr = this.form
            arr.approveStatus = 0
            this.$modal.loading("正在提交")
            editSupplier(arr).then(res => {
              if(res.code == 200){
                this.$refs.form.resetFields()
                this.$tab.closeOpenPage({ path: "/basedata/supplier/list" })
                this.$modal.msgSuccess("操作成功!")
                this.$modal.closeLoading()
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.upload-title{
  width: 140px;
  padding-right: 10px;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
}
.avatar-uploader{
  display: flex;
  align-items: center;
  justify-content: center;
  color:#606266;
  width: 178px;
  height: 178px;
  margin-bottom: 22px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #5ED4D4;
}
.avatar-uploader:hover .avatar-uploader-icon{
  color: #5ED4D4;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  display: block;
}
</style>